
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh_Hans">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单资源（ Media 类） &#8212; Django 3.2.11.dev 文档</title>
    <link rel="stylesheet" href="../../_static/default.css" type="text/css" />
    <link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
    <script type="text/javascript" id="documentation_options" data-url_root="../../" src="../../_static/documentation_options.js"></script>
    <script type="text/javascript" src="../../_static/jquery.js"></script>
    <script type="text/javascript" src="../../_static/underscore.js"></script>
    <script type="text/javascript" src="../../_static/doctools.js"></script>
    <script type="text/javascript" src="../../_static/language_data.js"></script>
    <link rel="index" title="索引" href="../../genindex.html" />
    <link rel="search" title="搜索" href="../../search.html" />
    <link rel="next" title="模板" href="../templates.html" />
    <link rel="prev" title="从模型创建表单" href="modelforms.html" />



 
<script src="../../templatebuiltins.js"></script>
<script>
(function($) {
    if (!django_template_builtins) {
       // templatebuiltins.js missing, do nothing.
       return;
    }
    $(document).ready(function() {
        // Hyperlink Django template tags and filters
        var base = "../../ref/templates/builtins.html";
        if (base == "#") {
            // Special case for builtins.html itself
            base = "";
        }
        // Tags are keywords, class '.k'
        $("div.highlight\\-html\\+django span.k").each(function(i, elem) {
             var tagname = $(elem).text();
             if ($.inArray(tagname, django_template_builtins.ttags) != -1) {
                 var fragment = tagname.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>");
             }
        });
        // Filters are functions, class '.nf'
        $("div.highlight\\-html\\+django span.nf").each(function(i, elem) {
             var filtername = $(elem).text();
             if ($.inArray(filtername, django_template_builtins.tfilters) != -1) {
                 var fragment = filtername.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>");
             }
        });
    });
})(jQuery);</script>

  </head><body>

    <div class="document">
  <div id="custom-doc" class="yui-t6">
    <div id="hd">
      <h1><a href="../../index.html">Django 3.2.11.dev 文档</a></h1>
      <div id="global-nav">
        <a title="Home page" href="../../index.html">Home</a>  |
        <a title="Table of contents" href="../../contents.html">Table of contents</a>  |
        <a title="Global index" href="../../genindex.html">Index</a>  |
        <a title="Module index" href="../../py-modindex.html">Modules</a>
      </div>
      <div class="nav">
    &laquo; <a href="modelforms.html" title="从模型创建表单">previous</a>
     |
    <a href="../index.html" title="使用 Django" accesskey="U">up</a>
   |
    <a href="../templates.html" title="模板">next</a> &raquo;</div>
    </div>

    <div id="bd">
      <div id="yui-main">
        <div class="yui-b">
          <div class="yui-g" id="topics-forms-media">
            
  <div class="section" id="s-form-assets-the-media-class">
<span id="form-assets-the-media-class"></span><h1>表单资源（ <code class="docutils literal notranslate"><span class="pre">Media</span></code> 类）<a class="headerlink" href="#form-assets-the-media-class" title="永久链接至标题">¶</a></h1>
<p>要渲染一个有吸引力且易于使用的Web表单不仅仅需要HTML，还需要CSS样式表，如果您想使用多样的 &quot;Web2.0&quot; 组件，您还需要在每个页面上包含一些JavaScript。要在任何给定模板上准确组合CSS和JavaScript取决于此页面上使用的组件。</p>
<p>这是资源定义的来源。Django允许你将不同的文件（像样式表和脚本）与需要这些资源的表单和组件进行关联。例如，如果您想用日历来渲染DateFields，你可以自定义一个日历组件。然后这个组件可以与渲染日历所需的CSS和JavaScript相关联。在表单上使用日历组件时，Django能够识别所需的CSS和JavaScript文件，并提供表单中的文件名列表，合适地插入到你的网页中。</p>
<div class="admonition-assets-and-django-admin admonition">
<p class="first admonition-title">资源及Django Admin</p>
<p>Django Admin应用程序为日历、选择过滤及其他功能定义了一些定制的组件。这些组件定义资源的需求，Django Admin使用自定义组件来代替Django的默认组件。Admin模板将只会包含在页面上呈现组件所需的文件。</p>
<p class="last">如果您喜欢Django Admin应用程序使用的组件，您可以在应用中随意使用它们。它们都位于 <code class="docutils literal notranslate"><span class="pre">django.contrib.admin.widgets</span></code> 。</p>
</div>
<div class="admonition-which-javascript-toolkit admonition">
<p class="first admonition-title">哪个JavaScript工具包？</p>
<p class="last">现在有很多JavaScript工具包，它们中许多都包含组件（比如日历组件），可以用来改善您的应用程序。Django刻意避免去推荐任何一个JavaScript工具包。每个工具包都有自己的优点和缺点，使用适合您需求的工具包。Django能够与任何JavaScript工具包集成。</p>
</div>
<div class="section" id="s-assets-as-a-static-definition">
<span id="s-id1"></span><span id="assets-as-a-static-definition"></span><span id="id1"></span><h2>资源作为静态定义<a class="headerlink" href="#assets-as-a-static-definition" title="永久链接至标题">¶</a></h2>
<p>定义资源最简单方法是静态定义。要使用这种方法，声明是一个内部的 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 类。此内部类的属性定义了这个需求。</p>
<p>这有个例子:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">django</span> <span class="kn">import</span> <span class="n">forms</span>

<span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
        <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
            <span class="s1">&#39;all&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;pretty.css&#39;</span><span class="p">,)</span>
        <span class="p">}</span>
        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;animations.js&#39;</span><span class="p">,</span> <span class="s1">&#39;actions.js&#39;</span><span class="p">)</span>
</pre></div>
</div>
<p>这段代码定义了一个 <code class="docutils literal notranslate"><span class="pre">CalendarWidget</span></code> ，它继承自 <code class="docutils literal notranslate"><span class="pre">TextInput</span></code> 。每次CalendarWidget在表单上使用时，该表单都会包含CSS文件 <code class="docutils literal notranslate"><span class="pre">pretty.css</span></code> ，以及JavaScript文件 <code class="docutils literal notranslate"><span class="pre">animations.js</span></code> 和 <code class="docutils literal notranslate"><span class="pre">actions.js</span></code> 。</p>
<p>这个静态定义在运行时被转换成名为 <code class="docutils literal notranslate"><span class="pre">media</span></code> 的组件属性。 <code class="docutils literal notranslate"><span class="pre">CalendarWidget</span></code>&nbsp;实例的资源列表可以通过这个属性获得：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;http://static.example.com/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/actions.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
<p>以下是所有可能的 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 选项列表。没有一个是必需项。</p>
<div class="section" id="s-css">
<span id="css"></span><h3><code class="docutils literal notranslate"><span class="pre">css</span></code><a class="headerlink" href="#css" title="永久链接至标题">¶</a></h3>
<p>描述各种表单输出媒体所需的CSS文件的字典。</p>
<p>字典中的值应该是一个文件名元组/列表。有关如何指定这些文件的路径的详细内容，请参阅 <a class="reference internal" href="#form-asset-paths"><span class="std std-ref">路径章节</span></a> 。</p>
<p>字典中的键是输出媒体类型。它们和媒体声明中CSS文件接受的类型相同：'all'、'aural'、'braille'、'embossed'、'handheld'、'print'、'projection'、'screen'、'tty' 和 'tv'。如果您需要针对不同媒体类型使用不同的样式表，就要给每个输出媒体提供一个CSS文件列表。下面的示例提供了两个CSS选项——一个用于屏幕，一个用于打印：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
    <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
        <span class="s1">&#39;screen&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;pretty.css&#39;</span><span class="p">,),</span>
        <span class="s1">&#39;print&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;newspaper.css&#39;</span><span class="p">,)</span>
    <span class="p">}</span>
</pre></div>
</div>
<p>如果一组CSS文件适用于多种输出媒体类型，字典的键可以是以逗号分隔的输出媒体类型列表。在下面的例子中，电视和投影机将具有相同的媒体需求：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
    <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
        <span class="s1">&#39;screen&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;pretty.css&#39;</span><span class="p">,),</span>
        <span class="s1">&#39;tv,projector&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;lo_res.css&#39;</span><span class="p">,),</span>
        <span class="s1">&#39;print&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;newspaper.css&#39;</span><span class="p">,)</span>
    <span class="p">}</span>
</pre></div>
</div>
<p>如果最后的这个CSS定义被渲染，它将成为下面的HTML：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">link</span> <span class="n">href</span><span class="o">=</span><span class="s2">&quot;http://static.example.com/pretty.css&quot;</span> <span class="nb">type</span><span class="o">=</span><span class="s2">&quot;text/css&quot;</span> <span class="n">media</span><span class="o">=</span><span class="s2">&quot;screen&quot;</span> <span class="n">rel</span><span class="o">=</span><span class="s2">&quot;stylesheet&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">link</span> <span class="n">href</span><span class="o">=</span><span class="s2">&quot;http://static.example.com/lo_res.css&quot;</span> <span class="nb">type</span><span class="o">=</span><span class="s2">&quot;text/css&quot;</span> <span class="n">media</span><span class="o">=</span><span class="s2">&quot;tv,projector&quot;</span> <span class="n">rel</span><span class="o">=</span><span class="s2">&quot;stylesheet&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">link</span> <span class="n">href</span><span class="o">=</span><span class="s2">&quot;http://static.example.com/newspaper.css&quot;</span> <span class="nb">type</span><span class="o">=</span><span class="s2">&quot;text/css&quot;</span> <span class="n">media</span><span class="o">=</span><span class="s2">&quot;print&quot;</span> <span class="n">rel</span><span class="o">=</span><span class="s2">&quot;stylesheet&quot;</span><span class="o">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="s-js">
<span id="js"></span><h3><code class="docutils literal notranslate"><span class="pre">js</span></code><a class="headerlink" href="#js" title="永久链接至标题">¶</a></h3>
<p>描述所需JavaScript文件的一个元组。有关如何指定这些文件的路径的详细内容，请参阅 <a class="reference internal" href="#form-asset-paths"><span class="std std-ref">路径章节</span></a> 。</p>
</div>
<div class="section" id="s-extend">
<span id="extend"></span><h3><code class="docutils literal notranslate"><span class="pre">extend</span></code><a class="headerlink" href="#extend" title="永久链接至标题">¶</a></h3>
<p>定义了 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 声明继承行为的一个布尔值。</p>
<p>默认情况下，使用静态 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 定义的对象都将继承与父组件关联的所有资源。无论父级如何定义自己的需求，都会发生这种情况。例如，如果我们要从上面的例子中扩展我们的基础日历组件：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">FancyCalendarWidget</span><span class="p">(</span><span class="n">CalendarWidget</span><span class="p">):</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span>            <span class="s1">&#39;all&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;fancy.css&#39;</span><span class="p">,)</span>
<span class="gp">... </span>        <span class="p">}</span>
<span class="gp">... </span>        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;whizbang.js&#39;</span><span class="p">,)</span>

<span class="gp">&gt;&gt;&gt; </span><span class="n">w</span> <span class="o">=</span> <span class="n">FancyCalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;http://static.example.com/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;link href=&quot;http://static.example.com/fancy.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/actions.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/whizbang.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
<p>FancyCalendar组件从其父组件继承所有资源。如果您不想用这种方式继承 <code class="docutils literal notranslate"><span class="pre">Media</span></code> ，要在 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 声明中添加一个 <code class="docutils literal notranslate"><span class="pre">extend=False</span></code> 声明：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">FancyCalendarWidget</span><span class="p">(</span><span class="n">CalendarWidget</span><span class="p">):</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">extend</span> <span class="o">=</span> <span class="kc">False</span>
<span class="gp">... </span>        <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span>            <span class="s1">&#39;all&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;fancy.css&#39;</span><span class="p">,)</span>
<span class="gp">... </span>        <span class="p">}</span>
<span class="gp">... </span>        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;whizbang.js&#39;</span><span class="p">,)</span>

<span class="gp">&gt;&gt;&gt; </span><span class="n">w</span> <span class="o">=</span> <span class="n">FancyCalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;http://static.example.com/fancy.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/whizbang.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
<p>如果您需要更多的继承控制，用一个 <a class="reference internal" href="#dynamic-property"><span class="std std-ref">动态属性</span></a> 定义你的 。动态属性使您可以完全控制哪些文件是否继承。</p>
</div>
</div>
<div class="section" id="s-media-as-a-dynamic-property">
<span id="s-dynamic-property"></span><span id="media-as-a-dynamic-property"></span><span id="dynamic-property"></span><h2>把 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 作为动态属性<a class="headerlink" href="#media-as-a-dynamic-property" title="永久链接至标题">¶</a></h2>
<p>如果您需要执行一些更复杂的资源需求操作，你可以直接定义 <code class="docutils literal notranslate"><span class="pre">media</span></code> 属性。这是通过定义一个返回 <code class="docutils literal notranslate"><span class="pre">forms.Media</span></code> 实例的组件属性来实现的。这个 <code class="docutils literal notranslate"><span class="pre">forms.Media</span></code> 的构造函数接受 <code class="docutils literal notranslate"><span class="pre">css</span></code> 和 <code class="docutils literal notranslate"><span class="pre">js</span></code> 关键字参数，与静态媒体定义中使用的格式相同。</p>
<p>例如，我们也可以以动态的方式定义日历组件的静态定义：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
    <span class="nd">@property</span>
    <span class="k">def</span> <span class="nf">media</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
        <span class="k">return</span> <span class="n">forms</span><span class="o">.</span><span class="n">Media</span><span class="p">(</span><span class="n">css</span><span class="o">=</span><span class="p">{</span><span class="s1">&#39;all&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;pretty.css&#39;</span><span class="p">,)},</span>
                           <span class="n">js</span><span class="o">=</span><span class="p">(</span><span class="s1">&#39;animations.js&#39;</span><span class="p">,</span> <span class="s1">&#39;actions.js&#39;</span><span class="p">))</span>
</pre></div>
</div>
<p>更多有关如何为动态 <code class="docutils literal notranslate"><span class="pre">media</span></code> 属性构建返回值的内容，请参阅 <cite>媒体对象</cite> 章节。</p>
</div>
<div class="section" id="s-paths-in-asset-definitions">
<span id="s-form-asset-paths"></span><span id="paths-in-asset-definitions"></span><span id="form-asset-paths"></span><h2>资源定义中的路径<a class="headerlink" href="#paths-in-asset-definitions" title="永久链接至标题">¶</a></h2>
<p>用于指定资源的路径可以是相对路径的也可以是绝对路径的。如果路径以 <code class="docutils literal notranslate"><span class="pre">/</span></code> 、 <code class="docutils literal notranslate"><span class="pre">http://</span></code> 或 <code class="docutils literal notranslate"><span class="pre">https://</span></code> 开头，则它将被解释为绝对路径，并保持原样。所有其他路径都会以相应值作为前缀。如果在settings中设置了 <a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><code class="xref py py-mod docutils literal notranslate"><span class="pre">django.contrib.staticfiles</span></code></a> ，就可以用来服务于资源。</p>
<p>无论您是否使用 <a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><code class="xref py py-mod docutils literal notranslate"><span class="pre">django.contrib.staticfiles</span></code></a> ，都需要设置 <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATIC_URL</span></code></a> 和 <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_ROOT"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATIC_ROOT</span></code></a> 来渲染一张完整的网页。</p>
<p>为了找到相应的前缀来使用，Django会去检查 <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATIC_URL</span></code></a> 是否不为 <code class="docutils literal notranslate"><span class="pre">None</span></code> ，并自动回退使用 <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">MEDIA_URL</span></code></a> 。例如，您的网站的 <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">MEDIA_URL</span></code></a> 设置为 <code class="docutils literal notranslate"><span class="pre">'http://uploads.example.com/'</span></code> 且 <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATIC_URL</span></code></a> 设置是 <code class="docutils literal notranslate"><span class="pre">None</span></code> ：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="kn">from</span> <span class="nn">django</span> <span class="kn">import</span> <span class="n">forms</span>
<span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span>            <span class="s1">&#39;all&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;/css/pretty.css&#39;</span><span class="p">,),</span>
<span class="gp">... </span>        <span class="p">}</span>
<span class="gp">... </span>        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;animations.js&#39;</span><span class="p">,</span> <span class="s1">&#39;http://othersite.com/actions.js&#39;</span><span class="p">)</span>

<span class="gp">&gt;&gt;&gt; </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;/css/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://uploads.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://othersite.com/actions.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
<p>但如果 <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATIC_URL</span></code></a> 设置是 <code class="docutils literal notranslate"><span class="pre">'http://static.example.com/'</span></code> ：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;/css/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://othersite.com/actions.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
<p>或者如果 <a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><code class="xref py py-mod docutils literal notranslate"><span class="pre">staticfiles</span></code></a> 配置使用 <a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.storage.ManifestStaticFilesStorage" title="django.contrib.staticfiles.storage.ManifestStaticFilesStorage"><code class="xref py py-class docutils literal notranslate"><span class="pre">ManifestStaticFilesStorage</span></code></a> ：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;/css/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;https://static.example.com/animations.27e20196a850.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://othersite.com/actions.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="s-media-objects">
<span id="media-objects"></span><h2><code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象<a class="headerlink" href="#media-objects" title="永久链接至标题">¶</a></h2>
<p>当您访问表单或者组件的 <code class="docutils literal notranslate"><span class="pre">media</span></code>&nbsp;属性时，返回值是一个 <code class="docutils literal notranslate"><span class="pre">forms.Media</span></code> 对象。正如我们已经看到的， <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象的字符串表示是一段需要在您HTML页面的 <code class="docutils literal notranslate"><span class="pre">&lt;head&gt;</span></code> 块中包含相关文件的HTML代码。</p>
<p>然而， <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象还有其他一些有趣的属性。</p>
<div class="section" id="s-subsets-of-assets">
<span id="subsets-of-assets"></span><h3>资源的子集<a class="headerlink" href="#subsets-of-assets" title="永久链接至标题">¶</a></h3>
<p>如果您只需要特定类型的文件，则可以使用下标运算符过滤出感兴趣的媒体文件。例如：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="n">w</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;http://static.example.com/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/actions.js&quot;&gt;&lt;/script&gt;</span>

<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w</span><span class="o">.</span><span class="n">media</span><span class="p">[</span><span class="s1">&#39;css&#39;</span><span class="p">])</span>
<span class="go">&lt;link href=&quot;http://static.example.com/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
</pre></div>
</div>
<p>当您使用下标运算符时，返回值是一个新的 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象——但只包含感兴趣的媒体。</p>
</div>
<div class="section" id="s-combining-media-objects">
<span id="combining-media-objects"></span><h3>合并 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象<a class="headerlink" href="#combining-media-objects" title="永久链接至标题">¶</a></h3>
<p><code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象也可以添加到一起。当添加两个 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象时，生成的 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象包含两者指定的资源的并集：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="kn">from</span> <span class="nn">django</span> <span class="kn">import</span> <span class="n">forms</span>
<span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span>            <span class="s1">&#39;all&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;pretty.css&#39;</span><span class="p">,)</span>
<span class="gp">... </span>        <span class="p">}</span>
<span class="gp">... </span>        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;animations.js&#39;</span><span class="p">,</span> <span class="s1">&#39;actions.js&#39;</span><span class="p">)</span>

<span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">OtherWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;whizbang.js&#39;</span><span class="p">,)</span>

<span class="gp">&gt;&gt;&gt; </span><span class="n">w1</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="n">w2</span> <span class="o">=</span> <span class="n">OtherWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w1</span><span class="o">.</span><span class="n">media</span> <span class="o">+</span> <span class="n">w2</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;link href=&quot;http://static.example.com/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/actions.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/whizbang.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="s-order-of-assets">
<span id="s-form-media-asset-order"></span><span id="order-of-assets"></span><span id="form-media-asset-order"></span><h3>资源的排序<a class="headerlink" href="#order-of-assets" title="永久链接至标题">¶</a></h3>
<p>资源插入DOM的顺序一般来说很重要。例如，您可能有一个依赖于jQuery的脚本。因此，合并 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象会尝试保持资源在每个 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 类中定义的相对顺序。</p>
<p>例如:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="kn">from</span> <span class="nn">django</span> <span class="kn">import</span> <span class="n">forms</span>
<span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">CalendarWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;jQuery.js&#39;</span><span class="p">,</span> <span class="s1">&#39;calendar.js&#39;</span><span class="p">,</span> <span class="s1">&#39;noConflict.js&#39;</span><span class="p">)</span>
<span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">TimeWidget</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">TextInput</span><span class="p">):</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">js</span> <span class="o">=</span> <span class="p">(</span><span class="s1">&#39;jQuery.js&#39;</span><span class="p">,</span> <span class="s1">&#39;time.js&#39;</span><span class="p">,</span> <span class="s1">&#39;noConflict.js&#39;</span><span class="p">)</span>
<span class="gp">&gt;&gt;&gt; </span><span class="n">w1</span> <span class="o">=</span> <span class="n">CalendarWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="n">w2</span> <span class="o">=</span> <span class="n">TimeWidget</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="nb">print</span><span class="p">(</span><span class="n">w1</span><span class="o">.</span><span class="n">media</span> <span class="o">+</span> <span class="n">w2</span><span class="o">.</span><span class="n">media</span><span class="p">)</span>
<span class="go">&lt;script src=&quot;http://static.example.com/jQuery.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/calendar.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/time.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/noConflict.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
<p>合并 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象时，如果资源排序冲突，会导致警告提示： <code class="docutils literal notranslate"><span class="pre">MediaOrderConflictWarning</span></code> 。</p>
</div>
</div>
<div class="section" id="s-media-on-forms">
<span id="media-on-forms"></span><h2>表单上的 <code class="docutils literal notranslate"><span class="pre">Media</span></code><a class="headerlink" href="#media-on-forms" title="永久链接至标题">¶</a></h2>
<p>组件不是唯一可以具有 <code class="docutils literal notranslate"><span class="pre">media</span></code> 定义的对象——表单也可以。表单上 <code class="docutils literal notranslate"><span class="pre">media</span></code> 定义的规则与组件的规则相同：声明可以是静态的或动态的；声明的路径和继承规则也一模一样。</p>
<p>无论您是否定义了 <code class="docutils literal notranslate"><span class="pre">media</span></code> 声明，<a href="#id1"><span class="problematic" id="id2">*</span></a>所有*表单对象都有一个 <code class="docutils literal notranslate"><span class="pre">media</span></code> 属性。该属性的默认值是这个表单的所有组件添加 <code class="docutils literal notranslate"><span class="pre">media</span></code> 定义的结果：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="kn">from</span> <span class="nn">django</span> <span class="kn">import</span> <span class="n">forms</span>
<span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">ContactForm</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">Form</span><span class="p">):</span>
<span class="gp">... </span>    <span class="n">date</span> <span class="o">=</span> <span class="n">DateField</span><span class="p">(</span><span class="n">widget</span><span class="o">=</span><span class="n">CalendarWidget</span><span class="p">)</span>
<span class="gp">... </span>    <span class="n">name</span> <span class="o">=</span> <span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">40</span><span class="p">,</span> <span class="n">widget</span><span class="o">=</span><span class="n">OtherWidget</span><span class="p">)</span>

<span class="gp">&gt;&gt;&gt; </span><span class="n">f</span> <span class="o">=</span> <span class="n">ContactForm</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="n">f</span><span class="o">.</span><span class="n">media</span>
<span class="go">&lt;link href=&quot;http://static.example.com/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/actions.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/whizbang.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
<p>如果您想将其他资源与表单关联起来——例如，表单布局的CSS——只要向表单添加 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 声明：</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="gp">&gt;&gt;&gt; </span><span class="k">class</span> <span class="nc">ContactForm</span><span class="p">(</span><span class="n">forms</span><span class="o">.</span><span class="n">Form</span><span class="p">):</span>
<span class="gp">... </span>    <span class="n">date</span> <span class="o">=</span> <span class="n">DateField</span><span class="p">(</span><span class="n">widget</span><span class="o">=</span><span class="n">CalendarWidget</span><span class="p">)</span>
<span class="gp">... </span>    <span class="n">name</span> <span class="o">=</span> <span class="n">CharField</span><span class="p">(</span><span class="n">max_length</span><span class="o">=</span><span class="mi">40</span><span class="p">,</span> <span class="n">widget</span><span class="o">=</span><span class="n">OtherWidget</span><span class="p">)</span>
<span class="gp">...</span>
<span class="gp">... </span>    <span class="k">class</span> <span class="nc">Media</span><span class="p">:</span>
<span class="gp">... </span>        <span class="n">css</span> <span class="o">=</span> <span class="p">{</span>
<span class="gp">... </span>            <span class="s1">&#39;all&#39;</span><span class="p">:</span> <span class="p">(</span><span class="s1">&#39;layout.css&#39;</span><span class="p">,)</span>
<span class="gp">... </span>        <span class="p">}</span>

<span class="gp">&gt;&gt;&gt; </span><span class="n">f</span> <span class="o">=</span> <span class="n">ContactForm</span><span class="p">()</span>
<span class="gp">&gt;&gt;&gt; </span><span class="n">f</span><span class="o">.</span><span class="n">media</span>
<span class="go">&lt;link href=&quot;http://static.example.com/pretty.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;link href=&quot;http://static.example.com/layout.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/animations.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/actions.js&quot;&gt;&lt;/script&gt;</span>
<span class="go">&lt;script src=&quot;http://static.example.com/whizbang.js&quot;&gt;&lt;/script&gt;</span>
</pre></div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      
        
          <div class="yui-b" id="sidebar">
            
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
  <h3><a href="../../contents.html">Table of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">表单资源（ <code class="docutils literal notranslate"><span class="pre">Media</span></code> 类）</a><ul>
<li><a class="reference internal" href="#assets-as-a-static-definition">资源作为静态定义</a><ul>
<li><a class="reference internal" href="#css"><code class="docutils literal notranslate"><span class="pre">css</span></code></a></li>
<li><a class="reference internal" href="#js"><code class="docutils literal notranslate"><span class="pre">js</span></code></a></li>
<li><a class="reference internal" href="#extend"><code class="docutils literal notranslate"><span class="pre">extend</span></code></a></li>
</ul>
</li>
<li><a class="reference internal" href="#media-as-a-dynamic-property">把 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 作为动态属性</a></li>
<li><a class="reference internal" href="#paths-in-asset-definitions">资源定义中的路径</a></li>
<li><a class="reference internal" href="#media-objects"><code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象</a><ul>
<li><a class="reference internal" href="#subsets-of-assets">资源的子集</a></li>
<li><a class="reference internal" href="#combining-media-objects">合并 <code class="docutils literal notranslate"><span class="pre">Media</span></code> 对象</a></li>
<li><a class="reference internal" href="#order-of-assets">资源的排序</a></li>
</ul>
</li>
<li><a class="reference internal" href="#media-on-forms">表单上的 <code class="docutils literal notranslate"><span class="pre">Media</span></code></a></li>
</ul>
</li>
</ul>

  <h4>上一个主题</h4>
  <p class="topless"><a href="modelforms.html"
                        title="上一章">从模型创建表单</a></p>
  <h4>下一个主题</h4>
  <p class="topless"><a href="../templates.html"
                        title="下一章">模板</a></p>
  <div role="note" aria-label="source link">
    <h3>本页</h3>
    <ul class="this-page-menu">
      <li><a href="../../_sources/topics/forms/media.txt"
            rel="nofollow">显示源代码</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3>快速搜索</h3>
    <div class="searchformwrapper">
    <form class="search" action="../../search.html" method="get">
      <input type="text" name="q" />
      <input type="submit" value="转向" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    </div>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
              <h3>Last update:</h3>
              <p class="topless">12月 07, 2021</p>
          </div>
        
      
    </div>

    <div id="ft">
      <div class="nav">
    &laquo; <a href="modelforms.html" title="从模型创建表单">previous</a>
     |
    <a href="../index.html" title="使用 Django" accesskey="U">up</a>
   |
    <a href="../templates.html" title="模板">next</a> &raquo;</div>
    </div>
  </div>

      <div class="clearer"></div>
    </div>
  </body>
</html>